import {Component, OnDestroy, OnInit} from "@angular/core";
import {CommService} from "../comm-service";
import {sjgzxinModuledatas} from "../pubcomponent/pageTitle.datas";
import {LocalStorageService} from "../local-storage-service";

declare var $: any;

@Component({
  template: `
  <div class="all_bg paddingTop">
    <div class="">
      <div class="portlet-body">
        <div class="tabbable-custom nav-justified">
          <ul class="nav nav-tabs nav-justified">
            <li class="active"><a href="#sczd" data-toggle="tab" (click)="tab('sczd')">手持终端</a>
              <!-- <div class="arrdowm"></div> -->
            </li>
            <li><a href="#dzbq" data-toggle="tab" (click)="tab('dzbq')">电子标签</a>
              <!-- <div class="arrdowm"></div> -->
            </li>
          </ul>
          <div class="tab-content">
            <!--手持终端-->
            <div class="tab-pane active" id="sczd">
              <div class="row">
                <form class="form-horizontal" role="form">
                  <div class="col-lg-5 col-lg-offset-1">
                    <div class="form-group">
                      <label class="col-lg-2 control-label">告警时间：</label>
                      <div class="col-lg-10">
                        <div class="input-group">
                          <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                          <input type="text" class="form-control datetimepickerB_contentZD" id="s_sbtimeZD"
                                 [value]="s_obj_sczd.kssj" readonly>
                          <span class="input-group-addon">至</span>
                          <input type="text" class="form-control datetimepickerE_contentZD" id="s_edtimeZD"
                                 [value]="s_obj_sczd.jssj" readonly>
                          <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-5">
                    <div class="form-group">
                      <label class="control-label col-lg-3" for="cxtj_zd">查询条件：</label>
                      <div class="col-lg-9">
                        <input type="text" id="cxtj_zd" name="cxtj" class="form-control"
                               placeholder="市区名称/考区名称/保密室名称/终端名称/终端ID" [(ngModel)]="s_obj_sczd.cxtj"/>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <button type="button" class="btn blue" (click)="inittable_sczd()">
                      <i class="fa fa-search"></i> 搜索
                    </button>
                  </div>
                </form>
              </div>
              <div class="row">
                <div class="col-lg-12" *ngIf="table_sczd">
                  <my-table [o]="table_sczd"></my-table>
                </div>
              </div>
            </div>
            <!--电子标签-->
            <div class="tab-pane" id="dzbq">
              <div class="row">
                <form class="form-horizontal" role="form">
                  <div class="col-lg-5 col-lg-offset-1">
                    <div class="form-group">
                      <label class="col-lg-2 control-label">告警时间：</label>
                      <div class="col-lg-10">
                        <div class="input-group">
                          <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                          <input type="text" class="form-control datetimepickerB_contentBQ" id="s_sbtimeBQ"
                                 [value]="s_obj_dzbq.kssj" readonly>
                          <span class="input-group-addon">至</span>
                          <input type="text" class="form-control datetimepickerE_contentBQ" id="s_edtimeBQ"
                                 [value]="s_obj_dzbq.jssj" readonly>
                          <span class="input-group-addon"><i class="fa fa-calculator"></i></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-5">
                    <div class="form-group">
                      <label class="control-label col-lg-3" for="cxtj_bq">查询条件：</label>
                      <div class="col-lg-8">
                        <input type="text" id="cxtj_bq" class="form-control" name="cxtj"
                               placeholder="市区名称/考区名称/保密室名称/标签ID" [(ngModel)]="s_obj_dzbq.cxtj"/>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-1">
                    <button type="button" class="btn blue" (click)="inittable_dzbq()">
                      <i class="fa fa-search"></i> 搜索
                    </button>
                  </div>
                </form>
              </div>
              <div class="row">
                <div class="col-lg-12" *ngIf="table_dzbq">
                  <my-table [o]="table_dzbq"></my-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  `,
  styles: []
})
export class TjbbGjzlComponent implements OnInit, OnDestroy {
  activetab: string = "sczd";
  s_obj_sczd: any = {
    kssj: "",
    jssj: "",
    cxtj: "",  //市区名称/考区名称/保密室名称/终端名称/终端ID
  };
  table_sczd: any;
  s_obj_dzbq: any = {
    kssj: "",
    jssj: "",
    cxtj: "",  // 市区名称/考区名称/保密室名称/标签ID
    ksjhbh: "", //b

  };
  table_dzbq: any;

  tab(activetab: string): void {
    this.activetab = activetab;
    this.search_n();
  }

  search_n(): void {
    if (this.activetab == "sczd") {
      this.inittable_sczd();
    } else if (this.activetab == "dzbq") {
      this.inittable_dzbq();
    }
  }

  inittable_sczd(): void {
    const that = this;
    this.s_obj_sczd.cxtj = this.commservice.removeSpace(false, this.s_obj_sczd.cxtj);
    this.s_obj_sczd.kssj = $("#s_sbtimeZD").val() ? $("#s_sbtimeZD").val() : this.s_obj_sczd.kssj;
    this.s_obj_sczd.jssj = $("#s_edtimeZD").val() ? $("#s_edtimeZD").val() : this.s_obj_sczd.jssj;
    this.table_sczd = {
      tableid: "table_sczd",
      url: "sjgz/zsymtjbb/sczdsbbjzl",
      reqobj: this.s_obj_sczd,
      sidePagination: "server",
      pageSize: 10,
      pageList: [10, 20, 30],
      total: "totalRows",
      rows: "sczdsbbjzlList",
      columns: [{
        title: "序号",
        field: "ordernum",
      }, {
        title: "设备名称",
        field: "sczdmc",
      }, {
        title: "ID",
        field: "id",
      }, {
        title: "试卷多拉",
        field: "sjdlbjsl",
      }, {
        title: "试卷少拉",
        field: "sjslbjsl",
      }, {
        title: "试卷错拉",
        field: "sjclbjsl",
      }, {
        title: "离线告警",
        field: "lxbjsl",
      }, {
        title: "超出范围",
        field: "ccwlbjsl",
      }, {
        title: "超速",
        field: "csbjsl",
      }, {
        title: "停留",
        field: "cstlbjsl",
      }, {
        title: "低电",
        field: "ddlbjsl",
      }, {
        title: "故障",
        field: "gzbjsl"
      }]
    };
    this.table_sczd.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 100;
  }

  inittable_dzbq(): void {
    const that = this;
    this.s_obj_dzbq.cxtj = this.commservice.removeSpace(false, this.s_obj_dzbq.cxtj);
    this.s_obj_dzbq.kssj = $("#s_sbtimeBQ").val() ? $("#s_sbtimeBQ").val() : this.s_obj_dzbq.kssj;
    this.s_obj_dzbq.jssj = $("#s_edtimeBQ").val() ? $("#s_edtimeBQ").val() : this.s_obj_dzbq.jssj;
    this.table_dzbq = {
      tableid: "table_dzbq",
      url: "sjgz/zsymtjbb/dzbqsbbjzl",
      reqobj: this.s_obj_dzbq,
      sidePagination: "server",
      pageSize: 10,
      pageList: [10, 20, 30],
      total: "totalRows",
      rows: "dzbqsbbjzlList",
      columns: [{
        title: "序号",
        field: "ordernum",
      }, {
        title: "试卷包名称",
        field: "bdsjbmc",
      }, {
        title: "ID",
        field: "bqid",
      }, {
        title: "超出围栏",
        field: "sjbzt",
        visible: false
      }, {
        title: "出库异常",
        field: "dqdz",
        visible: false
      }, {
        title: "入库异常",
        field: "jwd",
        visible: false
      }, {
        title: "位置异常",
        field: "sjwzycbjsl",
      }, {
        title: "蓝牙低电",
        field: "lyddlbjsl",
      }, {
        title: "GNSS低电",
        field: "gnssddlbjsl",
      }, {
        title: "离线",
        field: "lxbjsl"
      }, {
        title: '故障',
        field: "gzbjsl"
      }]
    };
    this.table_dzbq.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 100;
  }

  /**
   * 处理搜索表格
   */
  createSearchForm(): void {
    $('.datetimepickerB_contentZD').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 结束时间不能小于开始时间,
      $(".datetimepickerE_contentZD").datetimepicker("setStartDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    $('.datetimepickerE_contentZD').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 开始时间不能大于结束时间
      $(".datetimepickerB_contentZD").datetimepicker("setEndDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    $('.datetimepickerB_contentBQ').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 结束时间不能小于开始时间,
      $(".datetimepickerE_contentBQ").datetimepicker("setStartDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });
    $('.datetimepickerE_contentBQ').datetimepicker({
      autoclose: true,
      language: 'zh-CN',
      format: 'yyyy-mm-dd hh:ii:ss',
      pickerPosition: "bottom-left",
      minView: 0
    }).on("changeDate", function (ev) {
      const selectdate = ev.date.valueOf(); // 实际时间+ 8h
      // 开始时间不能大于结束时间
      $(".datetimepickerB_contentBQ").datetimepicker("setEndDate", new Date(selectdate - 8 * 60 * 60 * 1000));
    });


    const initBdate = this.commservice.YMDHMS_get(Date.now() - 24 * 60 * 60 * 1000);
    const initEdate = this.commservice.YMDHMS_get(false);
    this.s_obj_sczd.kssj = initBdate;
    this.s_obj_sczd.jssj = initEdate;
    this.s_obj_dzbq.kssj = initBdate;
    this.s_obj_dzbq.jssj = initEdate;
  }

  constructor(private commservice: CommService,
              private localStorageService: LocalStorageService) {

  }

  ngOnInit() {
    this.s_obj_dzbq.ksjhbh = this.localStorageService.get("hksjh");
    this.createSearchForm();
    this.inittable_sczd();
  }

  ngOnDestroy() {

  }

}
